<template>
  <view class="icon-page">
    <!-- 页面标题 -->
    <view class="page-title">图标展示</view>

    <!-- 功能类图标（可点击跳转） -->
    <view class="icon-group">
      <view class="group-title">功能图标</view>
      <view class="icon-grid">
        <icon-item 
          type="home" 
          name="首页" 
          @click="navigateTo('/pages/home/home')"
        ></icon-item>
        <icon-item 
          type="search" 
          name="搜索" 
          @click="navigateTo('/pages/search/search')"
        ></icon-item>
        <icon-item 
          type="user" 
          name="我的" 
          @click="navigateTo('/pages/mine/mine')"
        ></icon-item>
        <icon-item 
          type="setting" 
          name="设置" 
          @click="navigateTo('/pages/setting/setting')"
        ></icon-item>
        <icon-item 
          type="cart" 
          name="购物车" 
          @click="navigateTo('/pages/cart/cart')"
        ></icon-item>
        <icon-item 
          type="message" 
          name="消息" 
          @click="navigateTo('/pages/message/message')"
        ></icon-item>
      </view>
    </view>

    <!-- 操作类图标（可点击触发操作） -->
    <view class="icon-group">
      <view class="group-title">操作图标</view>
      <view class="icon-grid">
        <icon-item 
          type="plus" 
          name="添加" 
          @click="showAction('添加')"
        ></icon-item>
        <icon-item 
          type="minus" 
          name="减少" 
          @click="showAction('减少')"
        ></icon-item>
        <icon-item 
          type="edit" 
          name="编辑" 
          @click="showAction('编辑')"
        ></icon-item>
        <icon-item 
          type="trash" 
          name="删除" 
          @click="showAction('删除')"
        ></icon-item>
        <icon-item 
          type="share" 
          name="分享" 
          @click="showAction('分享')"
        ></icon-item>
        <icon-item 
          type="refresh" 
          name="刷新" 
          @click="showAction('刷新')"
        ></icon-item>
      </view>
    </view>

    <!-- 状态类图标 -->
    <view class="icon-group">
      <view class="group-title">状态图标</view>
      <view class="icon-grid">
        <icon-item type="checkmark" name="成功"></icon-item>
        <icon-item type="close" name="关闭"></icon-item>
        <icon-item type="warn" name="警告"></icon-item>
        <icon-item type="info" name="信息"></icon-item>
        <icon-item type="star" name="空心星"></icon-item>
        <icon-item type="star-filled" name="实心星"></icon-item>
      </view>
    </view>
  </view>
</template>

<script>
// 图标项组件（支持点击事件）
const IconItem = {
  props: ['type', 'name'],
  template: `
    <view class="icon-item" @click="$emit('click')">
      <uni-icons 
        :type="type" 
        size="50rpx" 
        color="#333"
      ></uni-icons>
      <text class="icon-name">{{ name }}</text>
    </view>
  `
};

export default {
  components: { IconItem },
  onLoad() {
    // 设置导航栏标题
    uni.setNavigationBarTitle({
      title: '可点击图标页'
    });
  },
  methods: {
    // 跳转到对应页面
    navigateTo(url) {
      // 检查页面是否存在
      uni.navigateTo({
        url,
        fail: () => {
          uni.showToast({
            title: '页面不存在',
            icon: 'none'
          });
        }
      });
    },
    // 显示操作提示
    showAction(action) {
      uni.showToast({
        title: `执行${action}操作`,
        icon: 'none'
      });
    }
  }
};
</script>